import Taro, { Component } from '@tarojs/taro';
import { View, Text ,Image,Label } from '@doctorwork/components';
import { AtTabs, AtTabsPane } from 'taro-ui';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import SelectCar from '../../components/selectCar/index';
import './index.styl';
import Empty from '../../components/Empty';

@connect(({ maintenance }) => ({
    ...maintenance
}))
@rewriteAddMTA
export default class Maintenance extends Component {
    config = {
        navigationBarTitleText: '保养记录',
        'navigationBarBackgroundColor': '#00c365',
        'navigationBarTextStyle': 'white'
    };

    constructor(props){
        super(props);
        this.state = {
            showCarSelect: false,
            currentTab: 0,
            tabList : [{ title: '保养项目' }, { title: '保养记录' }]
        };
    }

    componentDidShow() {
        const carNumber = wx.getStorageSync('carNumber')||'';
        if(carNumber){
            this.props.dispatch({
                type : 'maintenance/init',
                payload: {carNumber}
            });
        }
        this.props.dispatch({
            type : 'maintenance/getCarList',
            payload: {carNumber}
        });
    }

    jumpAdd(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/createMaintain/index',
            }
        });
    }
    jumpDetail(id){
        if(id == -1){
            wx.showToast({
                title: '请先添加数据',
                icon: 'none'
            });
            return;
        }
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : `/pages/createMaintain/index?id=${id}`,
            }
        });
    }
    /**
     * 修改tab
     * @param {*} value 
     */
    handleTabChange (value) {
        this.setState({
            currentTab: value
        });
    }

    /**
     * 选择了车辆
     * @param {*} carNumber 
     */
    onCarSelected(carNumber){
        if(carNumber){

            this.props.dispatch({
                type : 'maintenance/init',
                payload: {carNumber}
            });
        }
        this.setState({showCarSelect: false});
    }
    addCar(){
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }

    /**
     * 取消选择车辆
     */
    onCarCancel(){
        this.setState({showCarSelect: false});
    }
    /**
     * 添加记录
     */
    addRecord(){
        wx.navigateTo({
            url: '/pages/createMaintain/index',
        });
    }
    /**
     * 打开选择车辆弹窗
     */
    openCarModal(){
        const {carNumber} = this.props;
        if(!carNumber){
            wx.navigateTo({
                url: '/pages/car/index'
            });
        }else{
            this.setState({showCarSelect: true});
        }
    }
    render() {
        const {list,userData,duration,carNumber,carList,mainTenList} = this.props;
        const {showCarSelect,tabList,currentTab} = this.state;
        return (
            <View className='container'>
                <Navigate
                    title='保养记录'
                    color='white'
                    backgroundColor='#00c365'
                    backTextColor='white'
                />
                
                <View className='header'>
                    {
                        showCarSelect && <SelectCar carList={carList} carNumber={carNumber} onCarSelected={this.onCarSelected.bind(this)} onClose={this.onCarCancel.bind(this)} />
                    }
                    <View className='car-name'>
                        {
                            carNumber ? <View className='car-number' onClick={this.openCarModal.bind(this)} data-name={carNumber}>{carNumber}</View> : <View className='car-number' onClick={this.addCar.bind(this)} data-name='暂无车辆'>暂无车辆</View>
                        }
                        
                        {
                            carNumber && <Label className='car-exchange' onClick={this.openCarModal.bind(this)} data-name='切换'>切换 ></Label>
                        }
                        
                    </View>
                </View>
                <AtTabs current={currentTab} tabList={tabList} onClick={this.handleTabChange.bind(this)} data-name='tab切换'>
                    <AtTabsPane current={currentTab} index={0} >
                        {
                            mainTenList&&mainTenList.length ? <View className='content'>

                                <View>
                                    {
                                        mainTenList.map((data) => (<View key={data.info.image} className='oil-items'>
                                            <View className={data.base.timeStr ? 'oil-item': 'oil-item disabled'} >
                                                <View  style='width: 100%'>
                                                    <View className='oil-carNumber'>
                                                        <Image src={data.info.image} className='m-icon'></Image>{data.info.name}</View>
                                                    <View className='oil-time'><Label>上次保养时间：</Label><Label></Label>{data.base.timeStr||'暂无'}</View>
                                                    <View className='oil-time'><Label>上次保养里程：</Label><Label>{data.base.mileage ?data.base.mileage+'km' : '暂无'}</Label></View>
                                                    <View className='oil-time' ><Label>距离下次保养：</Label><Label><Label style={{color: (data.durationTime < 0 ? 'red': 'green')}}>{data.durationTime}</Label> / {data.info.time}天</Label></View>
                                                    <View className='oil-time' ><Label>距离下次保养：</Label><Label><Label style={{color: data.durationMileage < 0 ? 'red': 'green'}}>{data.durationMileage}</Label> / {data.info.mileage} km</Label></View>
                                                </View>
                            
                                            </View>
                                        </View>))
                                    }
                                </View>
                            </View>: <View className='empty'>
                                <Empty />
                            </View>
                        }
                        
                    </AtTabsPane>
                    <AtTabsPane current={currentTab} index={1}>
                        {
                            list&&list.length ? <View className='content'>

                                <View>
                                    {
                                        list.map((data, index) => (<View key={data.id} className='oil-items'>
                                            <View className='oil-step'>
                                                <View className='oil-dot'></View>
                                            </View>
                                            <View className='oil-item'  onClick={this.jumpDetail.bind(this,data.id)} data-name='查看详情' data-id={data.id}>
                                                <View  >

                                                    <View className='oil-carNumber'>{data.carNumber}</View>
                                                    <View className='oil-time'>保养时间：{data.timeStr}</View>
                                                    <View className='oil-time'>行驶里程：{data.mileage} km</View>
                                                </View>
                                                <View >
                                                    <View className='oil-detail' >查看详情<Text className='iconfont icon-right'>&#xe658;</Text></View>
                                                </View>
                            
                                            </View>
                                        </View>))
                                    }
                                </View>
                                <View className='no-more'>暂无更多数据~</View>
                            </View>: <View className='empty'>
                                <Empty />
                            </View>
                        }
                    </AtTabsPane>
         
                </AtTabs>
                <View className='footer'>
                    <View className='add-record' onClick={this.addRecord.bind(this)} data-name='添加记录'>添加记录</View>
                </View>
                
            </View>

        );
    }
}
